<template>
    <div v-if="isVisible" class="modal-overlay" @click="closeComment">
      <div class="modal-content" @click.stop>
        <span class="close-button" @click="closeComment">&times;</span>
        <h2>书籍评论</h2>
        <div class="comments">
          <ul>
            <li v-for="(comment, index) in comments" :key="index">
              <div class="comment-item">{{ comment.CommentContent }}</div>
            </li>
          </ul>
        </div>
        <form @submit.prevent="addComment">
            <textarea
            v-model="newCommentContent"
            placeholder="请输入您的评论..."
            rows="4"
            cols="50"
            ></textarea>
            <button type="submit">提交评论</button>
        </form>
      </div>
    </div>
</template>
  
  
  
<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      required: true
    },
    comments: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
        newCommentContent: "", 
    };
  },
  methods: {
    closeComment() {
      this.$emit('closeComment');
    },
    addComment() {
      // 检查评论内容是否为空
      if (!this.newCommentContent.trim()) {
        alert("评论内容不能为空");
        return;
      }
      this.$emit('addComment', this.newCommentContent); // 通过事件将评论内容传递给父组件
      this.newCommentContent = ""; // 清空评论输入框
    }
  }
}
</script>
  
<style scoped>
/* 背景遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 调整透明度，让背景更加柔和 */
  display: flex;  /* 使用 flexbox 让内容居中 */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保模态框在最上层 */
  animation: fadeIn 0.3s ease-out; /* 添加渐显动画 */
}

/* 模态框内容区域 */
.modal-content {
  background: #858282;
  padding: 30px;
  border-radius: 10px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 增加阴影 */
  position: relative;
  animation: slideIn 0.5s ease-out; /* 模态框出现时的滑动动画 */
}

/* 关闭按钮 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 28px;
  color: #333;
  transition: color 0.3s;
}

.close-button:hover {
  color: #d8413c; /* 鼠标悬停时改变颜色 */
}

/* 标题样式 */
h2 {
  text-align: center;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  margin-bottom: 20px;
  color: #ffffff;
}

/* 评论列表 */
.comments {
  margin-top: 10px;
  font-family: 'Arial', sans-serif;
}

/* 每个评论项 */
.comment-item {
  background-color: #000000;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: #faf7f7;
}

.comment-item:hover {
  background-color: #272727; /* 鼠标悬停时的背景色变化 */
}

/* 动画效果：渐显 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 动画效果：滑入 */
@keyframes slideIn {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0);
  }
}
</style>
